<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>剪刀石头布游戏</title>
    <style>

    </style>
</head>

<body>
    <div id="output" style="height: 400px; width: 600px; background: #eee;"></div>

    <button id="rock" style="height: 40px; width: 80px;">石头</button>
    <button id="scissor" style="height: 40px; width: 80px;">剪刀</button>
    <button id="paper" style="height: 40px; width: 80px;">布</button>
</body>
<script>
    const $button = {
        scissor: document.querySelector('#scissor'),
        rock: document.querySelector('#rock'),
        paper: document.querySelector('#paper'),
    }

    const $output = document.querySelector("#output");

    Object.keys($button).forEach((key) => {
        $button[key].addEventListener('click', function () {
            fetch(`http://${location.host}/game?action=${key}`)
                .then(response => {
                    return response.text();
                })
                .then(data => {
                    $output.innerHTML += data + '<br/>'
                })
        });
    });

</script>

</html>